<div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
    <div class="flex-shrink-0">
        <a href={Routes.blog_path(@conn, :show, @article)}><img class="h-48 w-full object-cover" src={@article.banner} alt={"#{@article.title} banner"}></a>
    </div>
    <div class="flex flex-1 flex-col justify-between bg-white p-6">
        <div class="flex-1">
            <p class="text-sm font-medium text-indigo-600">
                <a href={Routes.blog_path(@conn, :show, @article)}><%= @article.category %></a>
            </p>
            <a href={Routes.blog_path(@conn, :show, @article)} class="mt-2 block">
                <p class="text-xl font-semibold text-gray-900"><%= @article.title %></p>
                <p class="mt-3 text-base text-gray-500"><%= @article.excerpt %></p>
            </a>
        </div>
    </div>
</div>
